<include file="public/header" />
<body>
<div class="layui-fluid">
    <div class="layui-row">
        <form class="layui-form">
            <div class="layui-form-item">
                <label for="name" class="layui-form-label">
                    <span class="x-red">*</span>名称
                </label>
                <div class="layui-input-inline">
                    <input type="text" id="name" name="name" value="" required="" lay-verify="required"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">

                <label class="layui-form-label">上传缩略图</label>
                <div class="layui-input-block">
                    <button type="button" class="layui-btn"  id="test5"><i class="layui-icon"></i>上传缩略图</button>
                </div>
            </div>
            <input type="hidden" name="thumbs" value="">
            <div class="layui-form-item" id="thumb" style="display: none">
                <label class="layui-form-label">预览图</label>
                <div class="layui-input-block">
                    <img id="prev_img" style="width: 200px;height: 200px;" src="">
                </div>
            </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">门店类型<span style="color: red;">(必填)</span></label>
                    <div class="layui-input-block">
                        <input type="radio" name="type" value="1" title="直营店" checked lay-filter="type" >
                        <input type="radio" name="type" value="2" title="品牌店" lay-filter="type" >

                    </div>
                </div>
                <div class="layui-row show_1"  style="margin: auto;display: none">
                    <div class="layui-form-item">
                        <label class="layui-form-label">上级门店</label>
                        <div class="layui-input-block" style="width: 300px;" >
                            <select name="parent_id"  lay-search="" lay-filter="goods_ids">
                                <option value=""></option>
                                <foreach name="stores" item="vo">
                                    <option value="{$vo.id}">{$vo.name}</option>
                                </foreach>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">品牌类型<span style="color: red;">(必填)</span></label>
                    <div class="layui-input-block">
                        <input type="radio" name="store_type" value="1" title="汽车维修" checked="" >
<!--                        <input type="radio" name="store_type" value="2" title="直营店" >-->
                    </div>
                </div>
            <div class="layui-form-item">
                <label for="name" class="layui-form-label">
                    <span class="x-red">*</span>营业时间
                </label>
                <div class="layui-input-inline">
                    <input type="text"  name="business_hours" value="" required="" lay-verify="required"
                           autocomplete="off" class="layui-input">10:30-22:30
                </div>
            </div>
            <div class="layui-form-item">
                <label for="name" class="layui-form-label">
                    <span class="x-red">*</span>联系电话
                </label>
                <div class="layui-input-inline">
                    <input type="text"  name="phone" value="" required="" lay-verify="required"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">所在城市</label>
                    <div class="layui-input-inline">
                        <select name="province_id" lay-filter="province">
                            <option value=""></option>
                            <foreach name="$region" item="vo">
                                <option value="{$vo.id}">{$vo.name}</option>
                            </foreach>

                        </select>
                    </div>
                    <div class="layui-input-inline">
                        <select name="city_id" id="city" lay-filter="city">
                            <option value=""></option>
                        </select>
                    </div>
                    <div class="layui-input-inline">
                        <select name="area_id" id="area" lay-filter="area">
                            <option value=""></option>
                        </select>
                    </div>
                </div>
            <div class="layui-form-item">
                <label for="name" class="layui-form-label">
                    <span class="x-red">*</span>详细地址
                </label>
                <div class="layui-input-block">
                    <input type="text" id="address" style="width: 300px;" name="address" value="" required="" lay-verify="required"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label for="name" class="layui-form-label">
                    <span class="x-red">*</span>获取经度纬度
                </label>
                <div class="layui-input-inline">
                   <a type="button" class="layui-btn   layui-btn-warm" onclick="getaddress()" >点击获取经度纬度</a>
                </div>
            </div>
            <div class="layui-form-item">
                <label for="name" class="layui-form-label">
                    <span class="x-red">*</span>精度
                </label>
                <div class="layui-input-inline">
                    <input type="text" id="lng" name="lng" value="" required="" lay-verify="required"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label for="name" class="layui-form-label">
                    <span class="x-red">*</span>纬度
                </label>
                <div class="layui-input-inline">
                    <input type="text" id="lat" name="lat" value="" required="" lay-verify="required"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">门店介绍</label>
                <div class="layui-input-block">
                    <textarea placeholder="请输入内容" style="width: 500px;"  name="content" class="layui-textarea"></textarea>
                </div>
            </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">显示</label>
                    <div class="layui-input-block">
                        <input type="radio" name="status" value="1" title="是" checked="" >
                        <input type="radio" name="status" value="0" title="否" >
                    </div>
                </div>
                <div class="layui-form-item" >
                    <div class="layui-input-block">

                        <button type="button"  class="layui-btn" lay-submit=""  lay-filter="addEdit">保存</button>
                    </div>
                </div>
        </form>
    </div>
</div>
<script>

    function getaddress(){

        var address = $("input[name='address']").val();

        $.ajax({
            type: "GET",
            // url: "http://api.map.baidu.com/geocoder/v2/?ak=L7eu2mYjXkU5gFrwTICGKQ5I&callback=renderReverse&location=30.080539,103.857565&output=json&pois=1",
            url:"http://api.map.baidu.com/geocoding/v3/?address="+address+"&output=json&ak=HivG7gmGjGEvho94C5ZCrbM8gVuvklu7&callback",

            dataType: "jsonp",
            jsonp: 'callback',
            success: function (json) {
                var result = json.result;

                $("input[name='lat']").val(result.location.lat);
                $("input[name='lng']").val(result.location.lng);

                // var addressComponent = result.addressComponent;
                // alert(result.formatted_address);
                // var address = ['formatted_address', 'province', 'city', 'district', 'street'];
                // address[0] = result.formatted_address;
                // address[1] = addressComponent.province;
                // address[2] = addressComponent.city;
                // address[3] = addressComponent.district;
                // address[4] = addressComponent.street;
            },
            error: function () {
                alert('fail');
            }
        });

    };
    layui.config({
        base: '.././layarea/mods/'
        , version: '1.0'
    });
    layui.use(['form', 'layedit', 'laydate','jquery','upload'], function(){
        var form = layui.form
            ,layer = layui.layer
            , $ = layui.jquery
            , upload = layui.upload
            ,laydate = layui.laydate


        upload.render(

            {
                elem: '#test5',
                field:'thumbs'
                ,url: "{:url('Upload/ajaxUpload')}"
                ,accept: 'file' //普通文件
                ,exts: 'png|jpeg|jpg|webp' //只允许上传压缩文件
                ,done: function(res){
                    if(res.code == 200){
                        // xadmin.close();
                        // xadmin.father_reload();
                        $('#thumb').show();
                        $('#prev_img').attr('src',''+res.data.path);
                        $('#thumbs').val(res.data);
                        layer.msg(res.msg);
                    }else {
                        layer.msg(res.msg);
                    }

                }
            });
        form.on('submit(addEdit)', function(data){
            $.post($('form').attr('action'),data.field,function(data){

                if(data.code == 200){
                    layer.msg(data.msg);
                    // setTimeout(function () {
                    //     window.location.href =data.url
                    // },2000)
                    xadmin.close();
                    xadmin.father_reload();
                }else {
                    layer.msg(data.msg);
                }
            });
            return false;
        });
        form.on('select(province)', function(data){
            $.getJSON("/Store/getCity?pid="+data.value, function(data){
                var optionstring = "";
                $.each(data.data, function(i,item){
                    optionstring += "<option value=\"" + item.id + "\" >" + item.name + "</option>";
                });
                $("#city").html('<option value=""></option>' + optionstring);
                form.render('select'); //这个很重要
            });
        })
        form.on('select(area)', function(data){
            var province_id = $('select[name="province_id"] option:selected').text();
            var city_id = $('select[name="city_id"] option:selected').text();
            var area_id = $('select[name="area_id"] option:selected').text();

            $('#address').val(province_id+city_id+area_id);

        });

        form.on('select(city)', function(data){
            $.getJSON("/Store/getCity?pid="+data.value, function(data){
                var optionstring = "";
                $.each(data.data, function(i,item){
                    optionstring += "<option value=\"" + item.id + "\" >" + item.name + "</option>";
                });
                $("#area").html('<option value=""></option>' + optionstring);


                form.render('select'); //这个很重要
            });
        });
        //拖拽上传
        form.on('submit(addEdit)', function(data){
            $.post($('form').attr('action'),data.field,function(data){
                if(data.code == 200){
                    layer.msg(data.msg);
                    setTimeout(function () {
                        window.location.href =data.url
                    },2000)
                    xadmin.close();
                    xadmin.father_reload();
                }else {
                    layer.msg(data.msg);
                }
            });
            return false;
        });
        form.on('radio(type)',function(data){

            if(data.value === '2'){

                $('.show_1').show();
            }else {
                $('.show_1').hide();

            }

        });
    });

</script>
</body>

</html>
